<template>
 <el-row>
      <el-col :lg="{ span: 21,offset:2}" :md="{span: 22}" class="c-container clearfix">
          <div class="content-left">
              <Row class="content_container one-content result" data-scroll-reveal >
                  <div class="post">
                      <div class="post-header">
                          <h2 class="post-title">{{result.title}}</h2>
                          <div class="post-meta"><Icon type="ios-time-outline"></Icon>{{result.create_time}}<span>|</span><span>{{result.type_name}}</span>
                          </div>
                      </div>
                      <div class="post-content" v-html="result.content">
                      </div>
                      <!--底部-->
                      <div class="post-meta">
                          <div>
                              <Icon type="pricetags" class="icon"></Icon>
                              <a class="category-link" href="javascript:void(0)" v-html="translateKey(result.key)"></a>
                          </div>
                          <div>
                              <span class=" f_zt"><Icon type="happy-outline" class=""></Icon>点赞来一下（ 92 ）</span>
                          </div>
                      </div>
                  </div>
              </Row>
              <Row class="two-content result" data-scroll-reveal >

                  <div class="related-article related-article-prev text-truncate">
                      <a href="">
                          <span>上一篇</span>在SpringMVC中获取request对象的几种方式		</a>
                  </div>
                  <div class="related-article related-article-prev text-truncate">
                      <a href="">
                          <span>上一篇</span>在SpringMVC中获取request对象的几种方式		</a>
                  </div>

              </Row>
              <Row class="three-content result" data-scroll-reveal>
                <div class="post">
                    <div class="post-header">
                        <h2 class="post-title">
                            留言
                        </h2>
                    </div>
                </div>
                  <div>
                  </div>
              </Row>
          </div>
              <div class="content-right">
                  <RIGHT></RIGHT>
              </div>
      </el-col>
 </el-row>
</template>
<style>
    .describeavater{
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        color: #888;
    }
.topcontent li{
    margin-bottom: 10px;
}
.avator li p{
        line-height: 19px;
    }
    .avaterMessaage i {
        width: 100px;
        height: 76px;
        overflow: hidden;
        display: block;
        border: #efefef 1px solid;
        float: left;
        margin-right: 10px;
    }
    img{
        height: 100%;
        margin: auto;
        -moz-transition: all .5s ease;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
    }
    .ios-time-outline{
        font-size: 15px;
        color: #ff5744;
        margin-right: 5px;
    }
    .avater{
        width: 80px;
        height:80px;
        line-height: 80px;
        border-radius: 50%;
        float: left;
        margin: 10px 20px;
    }
    .avater>ul,.message{
        float: left;
        margin: 10px 20px;
    }
    .avator li{
        list-style: none;
        padding:5px;
    }
    .post .post-title {
        margin: 0;
        color: #555;
        text-align: left;
        font: bold 25px/1.1 ff-tisa-web-pro,Cambria,"Times New Roman",Georgia,Times,sans-serif;
    }
    .post-header{
        position: relative;
        padding: 10px 10px;
        border-bottom: 1px solid #eee;
    }
    .post .post-meta {
        padding: 0;
        margin: 15px 0 0;
        color: #6e7173;
        display: inline;
        text-indent: .15em;
        font-size: 15px;
    }
    .post .post-content {
        clear: left;
        font-size: 15px;
        line-height: 1.77;
        padding: 30px 35px;
        color: #444;
        text-align: justify;
        text-justify: distribute;
        word-break: normal;
    }
    .ivu-row {
        border-radius: 10px;
        padding: 35px 30px;
        background-color: #ffffff8f;
    }
    .post-meta {
        margin: 5rem 0 1rem;
    }
    .post-meta .icon{
        font-size: 18px;
    }
    .post-meta>div:nth-of-type(1){
        float: left;
    }
    .post-meta>div:nth-of-type(2){
        float: right;
        cursor: pointer;
    }
    .post-meta>a {
        display: inline-block;
        padding: 3px 6px;
        border: 1px solid #eee;
        border-radius: 4px;
        background: hsla(0,0%,100%,.3);
        margin: 0 3px;
        font-size: .825rem;
    }
    .content-left{
        width: 70%;
        overflow: hidden;
        float: left;
    }
    .content-left >div {
        background-color: #ffffff8f;
        margin-bottom: 20px;
    }
    .two-content >div{

    }
    .two-content a{
        color:black;
    }
    .two-content >div:nth-of-type(1){
             float: left;
    }
    .content-left:before,.content-right:before{
        content: "";
        display: table;
    }
    .clearContent:before,.clearContent:after{
        content: "";
        display: table;
        clear: both;
        visibility: hidden;
        font-size: 0;
        height: 0;
    }
    .content-right{
        width: 28%;
        overflow: hidden;
        float: right;
    }
    .conditionMe{
        text-indent: 1.5em;
    }
    .category-link a{
        padding:5px 3px;
    }

</style>
<script>
    import '../../../../static/css/frontend/article/index.css'
    import scrollReveal from  'scrollreveal'
    import '../../../../static/js/public'
    import Row from "iview/src/components/grid/row";
    import RIGHT from "../right.vue";
    export default {
        components: {
            Row,
            RIGHT
        },
        props:{

        },
        data () {
            return {
                scrollReveal: scrollReveal(),
                row:{
                    page:1,
                    per_page:20
                },
                result:{},
                allKeys:{}
            }
        },
        mounted () {
            this.init();
            this.getKeys();
            this.initArticles();
        },
        methods: {
            init: function () {
                let target = this;
                this.scrollReveal.reveal('.result',target.configScroll);
            },
            getKeys(){
                var that = this;
                that.fetch({
                    url: '/gets',
                    method: 'GET',
                    params: {
                        type:2
                    }
                }).then(function (response) {
                    that.allKeys = response.data.rows;
                });
            },
            translateKey(key){
                var that = this;
                  if(key!=undefined){
                      var keyArr = key.split(',');
                      var asHtml = '';
                      for(var i in keyArr){
                          asHtml+='<a href="javascript:void(0);">'+that.getKeyHtml(keyArr[i])+'</a>';
                      }
                  }
                  return asHtml;
            },
            getKeyHtml(key){
              var that =  this;
              for(var i in that.allKeys){
                  if(that.allKeys[i]['id']==key){
                      return that.allKeys[i]['value'];
                  }
              }
            },
            initArticles(){
                var that = this;
                that.fetch({
                    url: '/article',
                    method: 'GET',
                    params: {
                        id:that.$route.query.id,
                        type:2
                    }
                }).then(function (response) {
                    that.result = response.data.rows[0][0];
                    var data = new Date(that.result['create_time'])
                    that.result['create_time'] = data.toLocaleString('chinese', {hour12: false});
                });
            },

    }
    }
</script>
